<template>
    <div class="new" :style="{ height: getHeight }">
        <el-scrollbar>
            <div class="new-w">
                <div class="new-con">
                    <div class="new-con-header">
                        <el-image style="width: 10vw; height: 8vh;" :src="logo" fit="scale-down" />
                        <el-button size="small" :text="true" :round="true" @click="back">
                            新闻首页<el-icon>
                                <ArrowRight />
                            </el-icon>
                        </el-button>
                        <span style="font-size:x-small;">正文</span>
                    </div>
                    <div class="new-con-title">
                        <span>{{ newscon.newsTitle }}</span>
                    </div>
                    <div class="new-con-middle">
                        <el-divider />
                        <div class="new-con-middle-con">
                            <div>
                                <span>{{ d }}</span>
                                <span style="margin-left:5px">{{ t }}</span>
                                <span style="color:black;margin-left: 10px;">516新闻快讯</span>
                            </div>
                            <div class="new-con-middle-con-right">
                                <el-tooltip content="点赞" placement="top" effect="light">
                                    <thumbs-up theme="multi-color" size="18" @click="Approve"
                                        :fill="!isApprove ? ['#000', '#f5f5f5', '#313131', '#313131'] : ['#000', '#06a17e', '#313131', '#313131']"
                                        :strokeWidth="2" />
                                </el-tooltip>
                                <span style="margin:7px">{{ approve }}</span>
                                <el-tooltip content="收藏" placement="top" effect="light">
                                    <like theme="multi-color" size="18" @click="Collection"
                                        :fill="!isCollection ? ['#000', '#f5f5f5', '#313131', '#fff'] : ['#fff', '#f73131', '#fff', '#fff']"
                                        :strokeWidth="2" />
                                </el-tooltip>
                                <span style="margin:7px">{{ collection }}</span>
                                <el-icon color="#909399" :size="15">
                                    <View />
                                </el-icon>
                                <span style="margin-left:3px;font-size:xx-small">{{ newscon.newsCount }}</span>
                                <el-divider direction="vertical" />
                                <el-tooltip content="点我查看评论" placement="top" effect="light">
                                    <el-icon style="cursor:pointer" @click="goCL('#CL')">
                                        <ChatLineRound />
                                    </el-icon>
                                </el-tooltip>
                            </div>
                        </div>
                        <el-divider />
                    </div>
                    <div class="new-con-con">
                        <div class="new-con-con-left">
                            <p>{{ newscon.newsDesc }}</p>
                            <video v-if="s" :src="newscon.newsImagePath" style="width:100%;height:100%;border-radius: 10px;"
                                autoplay controls />
                            <el-image v-if="!s" style="width: 100%;height:100%;border-radius: 10px;"
                                :src="newscon.newsImagePath" fit="fill" />
                            <p>{{ newscon.newsContent }}</p>
                        </div>
                        <div class="new-con-footer">
                            <span
                                style="font-weight:700;font-size:13px;font-family: Microsoft Yahei">声明：516小队独家稿件，未经授权禁止转载！</span>
                            <span style="font-size: 12px; font-weight: 600;font-family: Microsoft Yahei">关键词：<span
                                    style="font-weight:400">{{ newscon.categoryDesc }}</span></span>
                        </div>
                        <div class="new-con-con-right">
                            <div class="new-com">
                                <div class="new-com-header">
                                    <el-icon :size="20">
                                        <ChatLineSquare />
                                    </el-icon><span style="font-family:Helvetica Neue;margin-left:5px">发表评论</span>
                                </div>
                                <div class="new-com-body">
                                    <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
                                    <div class="com-con">
                                        <textarea type="textarea" v-model="comcon" cols="105" rows="3"
                                            style="border:0;outline: none;background-color: transparent;font-size: x-small;font-family:Verdana, Geneva, Tahoma, sans-serif"
                                            placeholder="快来评论吧！"></textarea>
                                    </div>
                                </div>
                                <div class="new-com-footer">
                                    <el-button type="primary" size="small" :disabled="comcon === ''"
                                        @click="publishcom">发布</el-button>
                                </div>
                            </div>
                            <div class="new-com-con" id="CL">
                                <div style="height:400px">
                                    <el-scrollbar style="height:100%">
                                        <el-image
                                            src="https://guet-lab.oss-cn-hangzhou.aliyuncs.com/api/2022/12/25/91e6c9b0-c34a-4581-bfac-b5269e58a4b0.png"
                                            v-if="comcontent.length == 0" style="width:100%"></el-image>
                                        <div v-for="(item, index) in comcontent" :key="index" class="new-com-con-con"
                                            @mouseenter="getindex(index)">
                                            <el-avatar
                                                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
                                            <div class="comconclass">
                                                <span
                                                    style="font-size:x-small;color:#333333;font-family:Verdana, Geneva, Tahoma, sans-serif">{{
                                                        item.commentContent
                                                    }}</span>
                                                <div class="dataclass">
                                                    <span style="font-size:xx-small;color:#999999">{{
                                                        item.commentDate.split("T")[0].replace("-", "年").replace("-",
                                                            "月") + "日"
                                                    }}</span>
                                                    <span style="font-size:xx-small;color:#999999;margin-left: 10px;">{{
                                                        item.commentDate.split("T")[1]
                                                    }}</span>
                                                    <span
                                                        style="font-size:1px;color:#999999;float: right;cursor: pointer;margin-right: 10px;"
                                                        @click="delcom(item, index)" v-if="index == number">删除</span>
                                                    <span
                                                        style="font-size:1px;color:#999999;float: right;cursor: pointer;margin-right: 10px;"
                                                        @click="updatecom(item, index)" v-if="index == number">修改评论</span>
                                                </div>
                                            </div>
                                        </div>
                                    </el-scrollbar>
                                </div>
                            </div>
                            <el-dialog v-model="dialogFormVisible2" title="添加栏目">
                                <el-form :model="form2">
                                    <el-form-item label="评论内容：">
                                        <el-input v-model="form2.commentContent" />
                                    </el-form-item>
                                </el-form>
                                <template #footer>
                                    <span class="dialog-footer">
                                        <el-button @click="dialogFormVisible2 = false">取消</el-button>
                                        <el-button type="primary" @click="upcom">
                                            修改
                                        </el-button>
                                    </span>
                                </template>
                            </el-dialog>
                        </div>
                    </div>
                </div>

            </div>
        </el-scrollbar>
    </div>
</template>

<script setup lang="ts">
import api from '../../api/api';
import { useRoute, useRouter } from 'vue-router';
import { ArrowRight, View, ChatLineRound, ChatLineSquare } from '@element-plus/icons-vue'
import { ThumbsUp, Like } from '@icon-park/vue-next'
import { usestore } from '../../store';
import { ElMessage } from 'element-plus';

const newsId = useRoute().params.newsId
const route = useRouter()
let getHeight = ref('')
const comcon = ref('')
const number = ref(0)
const dialogFormVisible2 = ref(false)
const approve = ref(0)
const collection = ref(0)
const isApprove = ref(false)
const isCollection = ref(false)
const { user } = usestore()
const approveData = ref<any[]>([])
const collectionData = ref<any[]>([])



const form2 = ref({
    commentId: '',
    index: 0,
    commentContent: ''
})

const comcontent = ref<any[]>([])

const tableData = ref<any[]>([])

const d = ref('')
const t = ref('')
const s = ref(false)


const newscon = ref<any>({})

const logo = ref('https://guet-lab.oss-cn-hangzhou.aliyuncs.com/api/2022/12/22/493261bf-2589-4eba-8acf-eaf480ba3c18.png')

const selectnew = (tableData: any[]) => {
    tableData.forEach((item) => {
        if (item.newsId == newsId) {
            newscon.value = item
        }
    })
    approve.value = newscon.value.newsApproveCount
    collection.value = newscon.value.newsCollectionCount
    getdate(newscon.value.newsDate)
    gettime(newscon.value.newsDate)
    showif(newscon.value.newsImagePath)
}

const goCL = (selector: string) => {
    document.querySelector(selector)?.scrollIntoView({
        behavior: "smooth"
    })
}

const getindex = (index: number) => {
    number.value = index
}

const delcom = (item: any, index: number) => {
    api.delcomment({ resId: newsId, commentId: item.commentId })
        .then(res => {
            if (res.data.code == 200) {
                ElMessage({
                    message: '删除评论成功',
                    type: 'success'
                })
                comcontent.value.splice(index, 1)
            }
        }).catch(err => console.log(err))
}

const Approve = () => {
    isApprove.value = !isApprove.value;
    const data = { newsId: newsId, userId: user.userId }
    if (isApprove.value) {
        api.addapprove(data)
            .then(res => {
                if (res.data.code == 200) {
                    ElMessage({
                        message: '点赞成功',
                        type: 'success'
                    })
                    approve.value++
                }
            })
        return
    }
    api.delapprove(data)
        .then(res => {
            if (res.data.code == 200) {
                ElMessage({
                    message: '取消点赞',
                    type: 'success'
                })
                approve.value--
            }
        })
}

const Collection = () => {
    isCollection.value = !isCollection.value
    const data = { newsId: newsId, userId: user.userId }
    if (isCollection.value) {
        api.addcollection(data)
            .then(res => {
                if (res.data.code == 200) {
                    ElMessage({
                        message: '收藏成功',
                        type: 'success'
                    })
                    collection.value++
                }
            })
        return
    }
    api.delcollection(data)
        .then(res => {
            if (res.data.code == 200) {
                ElMessage({
                    message: '取消收藏',
                    type: 'success'
                })
                collection.value--
            }
        })
}

const getfilename = (url: string) => {
    const fileurl = decodeURI(url)
    if (fileurl != '') {
        return fileurl.split('/')[4].split('?')[0]
    }
    return ''
}

const showif = (url: string) => {
    const fileurl = getfilename(url)
    if (fileurl != '' && fileurl.split('.')[1] == 'mp4') {
        s.value = true
        return
    }
    s.value = false
}

const updatecom = (item: any, index: number) => {
    dialogFormVisible2.value = true
    form2.value.commentId = item.commentId
    form2.value.commentContent = item.commentContent
    form2.value.index = index
}


const upcom = () => {
    api.updatecom({ commentId: form2.value.commentId, commentContent: form2.value.commentContent })
        .then(res => {
            if (res.data.code == 200) {
                ElMessage({
                    message: '修改评论成功',
                    type: 'success'
                })
                dialogFormVisible2.value = false
                comcontent.value[form2.value.index].commentContent = form2.value.commentContent
            }
        }).catch(err => console.log(err))
}

const publishcom = () => {
    api.addcomment({ comment: { commentContent: comcon.value }, newsId: newsId })
        .then(res => {
            if (res.data.code == 200) {
                ElMessage({
                    message: '发布评论成功',
                    type: 'success'
                })
                comcon.value = ''
                initcom()
            }
        })
}

const getdate = (date: string) => {
    const datestr = date.split('T')[0].split('-')
    d.value = datestr[0] + '年' + datestr[1] + '月' + datestr[2] + '日'
}

const gettime = (date: string) => {
    const datestr = date.split('T')[1]
    t.value = datestr
}

const back = () => {
    route.back()
}
const initcom = () => {
    api.selectcom({ newsId: newsId })
        .then(res => {
            if (res.data.code == 200) {
                const comstr = JSON.stringify(res.data.data.map((item: any) => item.commentId)).replace(/[^,\d]/g, '')
                api.getcom({ commentIds: comstr })
                    .then(res => {
                        if (res.data.code == 200) {
                            comcontent.value = res.data.data
                        }
                    })
            }
        }).catch(err => console.log(err))
}


onMounted(() => {

    api.selectNews({ page: 1, size: 100 })
        .then(res => {
            if (res.data.code == 200) {
                tableData.value = res.data.data.records
                selectnew(tableData.value)
            }
        })
        .catch(err => console.log(err))

    api.getApprove({ userId: user.userId })
        .then(res => {
            if (res.data.code == 200) {
                approveData.value = res.data.data
                approveData.value.forEach((item: any) => {
                    if (item.newsId == newsId) {
                        isApprove.value = true
                    }
                })
            }
        })

    api.getcollection({ userId: user.userId })
        .then(res => {
            if (res.data.code == 200) {
                collectionData.value = res.data.data
                collectionData.value.forEach((item: any) => {
                    if (item.newsId == newsId) {
                        isCollection.value = true
                    }
                })
            }
        })

    initcom()


    getHeight.value = window.innerHeight - 20 + 'px'
    window.onresize = () => {
        getHeight.value = window.innerHeight - 20 + 'px'
    }
})

</script>

<style scoped>
.new {
    display: flex;
    justify-content: center;

}

.new-w {
    width: 98vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.new-con {
    width: 70vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px;

}

.new-con-header {
    display: flex;
    justify-content: left;
    align-items: center;

}

.new-con-title {
    padding: 20px 0;
    letter-spacing: 1px;

}

.new-con-title span {
    font-weight: 700;
    font-size: 30px;
    color: #4d4f53;

}

.new-con-middle span {
    font-size: xx-small;
    color: #909399;

}

.new-con-middle-con {
    display: flex;
    justify-content: space-between;
    align-items: center;

}

.new-con-middle-con-right {
    display: flex;
    justify-content: flex-start;
    align-items: center;

}

.new-con-con {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.new-con-con p {
    display: block;
    font: 13px/20px Hiragino Sans GB, Microsoft Yahei, \\5FAE\8F6F\96C5\9ED1, SimSun, \\5B8B\4F53, Arial;
    text-indent: 2em;
    margin-bottom: 18px;
}

.new-con-con-left {
    flex: 1.2;
}

.new-con-con-right {
    flex: 0.8;
    display: flex;
    flex-direction: column;
    padding: 10px;
    justify-content: space-between;
}

.new-com {
    flex: 0.8;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 10px;
    border: 1px solid #e8e8e8;
    border-top: 2px solid #323953;
    margin-bottom: 10px;
}

.new-com-header {
    display: flex;
    color: #3a425e;
    align-items: center;

}

.new-com-con {
    flex: 2.2;
    border: 1px solid #e8e8e8;
    border-top: 2px solid #323953;
}

.new-com-con-con {
    display: flex;
    padding: 20px;
    margin: 5px;
    justify-content: left;
    align-items: center;
    border-radius: 15px;
}

.new-com-con-con:hover {
    background-color: #e8e8e8;
}

.comconclass {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: left;
    margin-left: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e8e8e8;
}

.comconclass {
    margin-top: 7px;
}

.new-com-body {
    display: flex;
    margin-top: 10px;
    justify-content: space-between;
}

.com-con {
    position: relative;
    display: inline-block;
    padding: 10px;
    margin-left: 15px;
    border-radius: 5px;
    background-color: #f5f5f5;
    border: 1px solid #c5c5c5
}


.com-con::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 7px;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-right-color: #f5f5f5;
    font-size: 0;
    padding: 0;
    line-height: 0;
    z-index: 12;
}

.com-con::after {
    content: "";
    position: absolute;
    left: -12px;
    top: 6.5px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-right-color: #c5c5c5;
    font-size: 0;
    padding: 0;
    line-height: 0;
    z-index: 10;
}

.new-com-footer {
    display: flex;
    justify-content: end;
    margin-top: 10px;
}

.new-con-footer {
    display: flex;
    flex-direction: column;
    justify-content: start;
    margin-bottom: 10px;
}

.new-con-footer span {
    margin-top: 20px;
}
</style>